<template>
	<picker style="width: 100%;" mode="multiSelector" :range="range" range-key="label" :value="indexArr" @columnchange="onColumnChange($event)" @change="onIndexValueChange($event)">
		<slot></slot>
	</picker>
</template>

<script>
	import datePicker from './date/date-picker'
	import DateTime from './date/date-time'
	
	const dateTime = new DateTime()
	
	export default {
		name:"date-timer-picker",
		props: {
			value: {
				type: String,
				default: ""
			},
			start: {
				type: String,
				default: "1900-01-01"
			},
			end: {
				type: String,
				default: "2100-12-31"
			},
			fields: {
				type: String,
				default: "hour",
				validator: (val) => {
					let options = ["year", "month", "day", "hour", "minute", "second"]
					return options.indexOf(val) != -1
				}
			}
		},
		computed: {
			initialization() {
				let nowDate = new Date()
				let nowDateStr = (nowDate.getFullYear() + "/" + (nowDate.getMonth() + 1) + "/" + nowDate.getDate() + " " + nowDate.getHours() + ":" + nowDate.getMinutes() + ":" + nowDate.getSeconds())
				
				let value = this.value.replace(/-/g, "/") || nowDateStr
				let start = this.start || "1900-01-01"
				let end = this.end || "2100-12-31"
				let fields = this.fields || "day"
				
				let valueTimeStamp = new Date(value.replace(/-/g, "/")).getTime()
			    let startTimeStamp = new Date(start.replace(/-/g, "/")).getTime()
			    let endTimeStamp = new Date(end.replace(/-/g, "/")).getTime()
			    if(valueTimeStamp < startTimeStamp) {
				  value = start
			    } else if(valueTimeStamp > endTimeStamp) {
				  value = end
			    }
				
				return {
					value: value,
					start: start,
					end: end,
					fields: fields
				}
			}
		},
		watch: {
			initialization: {
				handler(newValue, oldValue) {
					this.init()
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				level: 3,
				range: [],
				indexArr: []
			};
		},
		methods: {
			init: function(curValue) {
				let fields = this.initialization.fields
				let level = 3
				if(fields == "year") {
					level = 1
				} else if(fields == "month") {
					level = 2
				} else if(fields == "day") {
					level = 3
				} else if(fields == "hour") {
					level = 4
				} else if(fields == "minute") {
					level = 5
				} else if(fields == "second") {
					level = 6
				}
				this.level = level
				
				dateTime.init({
					start: this.initialization.start,
					end: this.initialization.end,
					current: curValue || this.initialization.value
				})
				
				let range = []
				let indexArr = []
				if(level > 0) {
					dateTime.initYearRangeAndIndex()
					range[0] = dateTime.yearRangeAndIndex.range
					indexArr[0] = dateTime.yearRangeAndIndex.index
				}
		
				if(level > 1) {
					dateTime.initMonthRangeAndIndex()
					range[1] = dateTime.monthRangeAndIndex.range
					indexArr[1] = dateTime.monthRangeAndIndex.index
				}
		
				if(level > 2) {
					dateTime.initDayRangeAndIndex()
					range[2] = dateTime.dayRangeAndIndex.range
					indexArr[2] = dateTime.dayRangeAndIndex.index
				}
		
				if(level > 3) {
					dateTime.initHourRangeAndIndex()
					range[3] = dateTime.hourRangeAndIndex.range
					indexArr[3] = dateTime.hourRangeAndIndex.index
				}
		
				if(level > 4) {
					dateTime.initMinuteRangeAndIndex()
					range[4] = dateTime.minuteRangeAndIndex.range
					indexArr[4] = dateTime.minuteRangeAndIndex.index
				}
		
				if(level > 5) {
					dateTime.initSecondRangeAndIndex()
					range[5] = dateTime.secondRangeAndIndex.range
					indexArr[5] = dateTime.secondRangeAndIndex.index
				}
				
				this.range = range
				this.indexArr = indexArr
			},
			
			onColumnChange: function(event) {
				console.log("date-timer-picker onColumnChange", event)
				let column = event.detail.column
				let value = event.detail.value
				let indexArr = this.indexArr
				indexArr[column] = value
			  
				let curValue = dateTime.getCurrent(indexArr);
				this.init(curValue)
			},
			
			onIndexValueChange: function(event) {
				let indexArr = event.detail.value
				let value = dateTime.getCurrent(indexArr, this.level).replace(/\//g, "-");
				console.log("date-timer-picker onIndexValueChange", value)
				this.$emit("change", {detail: {value: value}})
			}
		}
		
	}
</script>

<style>

</style>